<template>
  <lay-col :md="24" style="margin-top:10px;">
    <lay-col :md="4">
      <DeptTree @node-click="nodeClick"></DeptTree>
    </lay-col>
    <lay-col :md="20">
      <lay-col :md="24">
        <lay-card>
          <lay-form :model="queryModel" ref="layFormRef">
            <lay-row>
              <lay-col :md="4">
                <lay-input size="sm" v-model="queryModel.name" style="width: 90%" placeholder="根据姓名查询"></lay-input>
              </lay-col>
              <lay-col :md="4">
                <lay-input size="sm" v-model="queryModel.idNumber" style="width: 90%"
                  placeholder="根据身份证号码查询"></lay-input>
              </lay-col>
              <lay-col :md="5">
                <lay-select size="sm" v-model="queryModel.status" placeholder="人员状态">
                  <lay-select-option v-for="status in dictMemberStatus" :value="status.key" :label="status.value">
                  </lay-select-option>
                </lay-select>
              </lay-col>
              <lay-col :md="8">
                <lay-button size="sm" type="primary" @click="GetList(queryModel)"
                  prefix-icon="layui-icon-search">查询</lay-button>
                <lay-button type="primary" size="sm" @click="add" v-permission="PerKey.Member_AddOrEditView"
                  prefix-icon="layui-icon-addition">新增
                </lay-button>
                <lay-button size="sm" type="normal" @click="exportExcel()" prefix-icon="layui-icon-export">导出EXCEL
                </lay-button>
                <lay-button size="sm" type="normal" @click="allList()" prefix-icon="layui-icon-rss">显示全部
                </lay-button>
              </lay-col>
            </lay-row>
          </lay-form>
        </lay-card>
      </lay-col>
      <lay-col :md="24">
        <lay-card>
          <lay-table :page="page" :columns="columns" :dataSource="dataSource" v-model:selectedKeys="selectedKeys"
            @change="change" :size="tablesize">
            <template v-slot:name="{ data }">
              {{ data.name }}
            </template>
            <template v-slot:postName="{ data }">
              {{ data.postName }}
            </template>
            <template v-slot:userinfo="{ data }">
              <lay-avatar :src="avatar(data.photo)" radius></lay-avatar>
            </template>
            <template v-slot:sex="{ data }">
              {{ data.sex == 1 ? "男" : "女" }}
            </template>
            <template v-slot:stat="{ data }">
              {{ dictFind(data.status) }}
            </template>
            <template v-slot:operator="{ data }">
              <lay-button-group>
                <lay-button type="primary" size="sm" @click="edit(data.id)" v-permission="PerKey.Member_AddOrEditView"
                  prefix-icon="layui-icon-edit">编辑
                </lay-button>
                <lay-button type="danger" size="sm" @click="del(data)" v-permission="PerKey.Member_Delete"
                  prefix-icon="layui-icon-delete">删除</lay-button>
              </lay-button-group>
            </template>
          </lay-table>
        </lay-card>
      </lay-col>
    </lay-col>
  </lay-col>
  <lay-layer :title="addoredittip" v-model="modelVisible" :resize="true" :area="['1100px']">
    <MemberPost :MemberId="MemberId" v-model:dialogIsOk="dialogIsOk"></MemberPost>
  </lay-layer>

</template>
<script lang="ts" setup>
import { reactive, ref, toRefs, watch } from "vue";
import { layer } from "@layui/layer-vue";
import { getList, delOne } from "../../../api/module/oas/member";
import { PerKey } from "../../../library/permissionConst"
import { useRoute } from "vue-router";
import { systemConfig } from "../../../library/config"
import { Member } from "../../../types/member";
import MemberPost from './components/MemberPost.vue'
import Util from '../../../library/Util'
import DeptTree from '../../auth/userdept/components/DeptTree.vue'

const selectedKeys = ref(["1"]);
const page = ref({ total: 0, limit: 10, current: 1, showCount: true, showRefresh: true, limits: [10, 15, 20, 50, 100, 200] });
const tablesize = ref('sm');
const columns = [
  { title: "Id", width: "50px", key: "id", align: "center", },
  { title: "姓名", width: "100px", customSlot: "name", align: "center", },
  { title: "身份证号", width: "160px", key: "idNumber", align: "center", },
  { title: "部门", width: "100px", key: "deptName", align: "center", },
  { title: "职务", customSlot: "postName", align: "center", },
  { title: "性别", width: "70px", align: "center", customSlot: "sex", },
  { title: "照片", width: "70px", align: "center", customSlot: "userinfo", },
  { title: "状态", customSlot: "stat", width: "80px", align: "center" },
  { title: "排序", key: "sort", width: "60px", align: "center" },
  { title: "操作", width: "180px", customSlot: "operator", key: "operator", align: "center", }
]
const dataSource = ref([])
const route = useRoute();
const avatar = (src: string) => {
  return src != null ? systemConfig.hostURL + src : null
}
//定义模型
const putData = reactive({
  queryModel: {
    deptId: 0,
    pageNum: page.value.current,
    pageSize: page.value.limit,
    name: "",
    idNumber: "",
    status: 0,
    exportExcel: false,
  },
  form: <Member><unknown>[]
})
const { queryModel } = toRefs(putData)
queryModel.value.deptId = route.query.deptId as unknown as number;
//获取列表
const GetList = function (query: any) {
  if (query != null) {
    queryModel.value.name = query.name
    queryModel.value.idNumber = query.idNumber
    queryModel.value.status = query.status
  }
  getList(queryModel.value).then((res) => {
    if (res.status == 1) {
      dataSource.value = res.data.data
      page.value.total = res.data.count
    }
  })
}

const nodeClick = async (node: any) => {
  queryModel.value.deptId = node.id;
  GetList(queryModel.value)
};

GetList(queryModel.value)
const dictMemberStatus = ref()
let dictList = Util.dictfilter("Sys_MemberStatus")
dictMemberStatus.value = dictList
const dictFind = (key: number) => {
  return Util.dictFind(dictList, key);
}

const exportExcel = () => {
  layer.confirm("确认导出当前列表EXCEL", {
    title: "警告", move: "true", shade: "false", shadeClose: "true",
    btn: [{
      text: '确认', callback: (layerId: number) => {
        queryModel.value.exportExcel = true
        getList(queryModel.value).then((res) => {
          const { filePath, fileName } = res.data
          if (res.status == 1) {
            Util.downloadFileForUrl(filePath, fileName)
            layer.close(layerId);
          } else {
            layer.msg('导出失败');
          }
        })
      }
    }, {
      text: '取消', callback: function (layerId: number) {
        layer.close(layerId);
      }
    }]
  })
}

const allList = function () {
  queryModel.value.deptId = 0
  queryModel.value.name = ""
  queryModel.value.idNumber = ""
  queryModel.value.status = 0
  GetList(queryModel.value)
}

//监听参数变化
watch(() => route.query, (val: any) => {
  if (val.deptId != undefined) {
    queryModel.value.deptId = val.deptId
    GetList(queryModel.value)
  }
}, { immediate: true, deep: true })

const change = function ({ current, limit }: any) {
  queryModel.value.pageNum = current
  queryModel.value.pageSize = limit
  GetList(queryModel.value);
};
//修改
const edit = function (id: number) {
  changeVisible(id)
}
//添加
const add = function () {
  changeVisible(0)
}
//删除
const del = function (data: any) {
  layer.confirm("确认删除ID: " + data.id + " " + data.name + "的人员信息吗？", {
    title: "警告", move: "true", shade: "false", shadeClose: "true",
    btn: [{
      text: '确认', callback: (layerId: number) => {
        delOne(data.id).then((res) => {
          if (res.status == 1) {
            layer.msg(res.msg, { time: 1000, icon: 1 }, () => {
              GetList(queryModel.value)
            });
          } else {
            layer.msg(res.msg, { time: 1000, icon: 2 });
          }
          layer.close(layerId);
        })
      }
    }, {
      text: '取消', callback: function (layerId: number) {
        layer.close(layerId);
      }
    }]
  })
}

//模态操作
let addoredittip = ref();
let MemberId = ref()
const modelVisible = ref(false)
const dialogIsOk = ref()
const changeVisible = function (id: number) {
  modelVisible.value = !modelVisible.value
  dialogIsOk.value = 0
  MemberId.value = id
  if (id == 0) {
    addoredittip.value = "新增人员";
    return
  } else {
    addoredittip.value = "编辑人员"
    return
  }
}

watch(dialogIsOk, (val, old) => {
  if (val == 1) {
    modelVisible.value = !modelVisible.value
    GetList(queryModel.value)
  }
})


</script>
<style scoped>

</style>